<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/css/all.css">
    <link rel="stylesheet" href="./ag.css">
    <style>
      body{
        width: 1080px;
      }
      .f{
        position: relative;
        left: 250px;
        top: 20px;
      }
  .swipe{
    position: relative;
    width: 910px;
    height: 500px;
    text-align: center;
    color: #fff;
    overflow: hidden;
  }
  .swipe ul{
    margin: 10px 0;
    padding: 0;
    width:calc(950px * 3) ;
    transition: 0.5s;
  }
  .swipe li{
    float: left;
    width: 910px;
    height:500px;
    border: 1px solid red;
   line-height: 500px;
  }
.swipe li:nth-child(1){
 background-image: url(./img/55551.jpg);
}
.swipe li:nth-child(2){
  background-image: url(./img/55552.jpg);
}
.swipe li:nth-child(3){
  background-image: url(./img/55553.jpg);
}
.swipe label{
  position: absolute;
  top: 400px;
  left: 300px;
  width: 10px;
  height: 10px;
  background-color: rebeccapurple;
  border-radius: 50%;
  transition: 0.2s;
  z-index: 99;
}
.swipe label[for="inr1"]{
  left: 45%;
}
.swipe label[for="inr2"]{
  left: 49%;
}
.swipe label[for="inr3"]{
  left: 54%;
}
#inr1:checked~ul{
  margin-left: 0;
}
#inr2:checked~ul{
  margin-left: -910px;
}
#inr3:checked~ul{
  margin-left: -1820px;
}
#inr1:checked~.swipe :nth-of-type(1){
  background-color: black;
}
#inr2:checked~.swipe label:nth-of-type(2){
  background-color: black;
}
#inr3:checked~.swipe label:nth-of-type(3){
  background-color:black;
}
.box1{
  width: 300px;
  height: 400px;
  border: 20px solid rgba(150, 107, 107, 0.3);
  border-radius: 14px;
  box-shadow: 0 0 rgba(150, 107, 107, 0.3);
  margin-top: 20px;
  float: left;
  background-image: url(./img/photo.jpg);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
}
.box1>h1{
  margin-top: 120px;
  text-align: center;
  font-weight: bolder;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
.box2{
  width: 300px;
  height: 300px;
  border: 20px solid  rgba(150, 107, 107, 0.3);
  border-radius: 14px ;
  border-radius: 50%;
  float: left;
  position: relative;
  left: 290px;
  top:70px;
  background-image: url(./img/center\(1\).jpg);
}
.box2>a{
  position: relative;
  top: 330px;
  left: 60px;
}
.box3{
  float: right;
  position: relative;
  top: 30px;
  left:380px;
  border: 20px solid rgba(192, 24, 24, 0.067);
  width: 300px;
  height: 400px;
  background-image: url(./img/cat1\(1\).jpg);
}
.box3>.b1{
  height: 25%;
  width: 100%;
  background-color: rgba(189, 25, 25, 0.144);
}
.box3>.b2{
  height: 25%;
  width: 100%;
  background-color: rgba(213, 189, 189, 0.144);
}
.box3>#choice{
  height: 50%;
  width: 100%;
  background-color: rgba(145, 33, 33, 0.577);
}
    </style>
</head>
<body>
  <div class="f">
        <div class="swipe">
            <input type="radio"name="indicator"id="inr1"checked>
            <label for="inr1"></label>
            <input type="radio"name="indicator"id="inr2">
            <label for="inr2"></label>
            <input type="radio"name="indicator"id="inr3">
            <label for="inr3"></label>
          <ul>
            <li>
              1</li>
            <li>
              2</li>
            <li>
             3</li>
          </ul>
          </div>
    </div>
  </div>
    <div class="header">
        <div class="box1">
            <h1>承诺</h1>
            &nbsp&nbsp想要成为住在树洞里的刺猬,愿意倾听你所有的喜怒哀乐,
            那些不能无法与人分享的故事都可以告诉我,
            我不能改变什么,
            唯一能做的是接受你的情绪
        </div>
        <div class="box2">
          <a href="">尽情说出你的心声
          </a>
        </div>
        <div class="box3">
            <div class="b1">
                <i>&nbsp&nbsp分类1 生活&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</i>
                <i class="fas fa-plus-square">添加</i>
               
                <ul>
                    <li> &nbsp&nbsp与理想平等交易，同喧嚣保持距离。
                      </li>
                    <li> &nbsp&nbsp前方的风景好，我的意思是别回头</li>
                    <li></li>
                </ul>
            </div>
            <div class="b2">
                <em>&nbsp&nbsp分类2 恋爱&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</em>
                <i class="fas fa-plus-square">添加</i>
                <ul>
                    <li>长日欣喜，四季与你
                    </li>
                    <li>乍见之欢，久处仍怦然
                    </li>
                    <li></li>
                </ul>
        </div>
        <div id="choice">
<ul></ul>
<h1>精选话题
</h1>
<li>就业季的那些就业烦恼
</li>
<li>大学真的需要有男/女朋友？
</li>
        </div>
    </div>
</body>
</html>